<template>
	<a-menu
		mode="inline"
		@click="({ key }: any) => { handleSelect(key) }"
		v-model:selectedKeys="selectedKeys"
		class="app-drbar"
	>
		<a-menu-item :key="codeName">
			<slot />
		</a-menu-item>
		<a-menu-item
			:key="item.name"
			v-for="item in ctrlItems"
			:disabled="item.disabled"
		>
			<AppIconText
				:imgPath="item.imgPath"
				:iconClass="item.iconClass"
				:text="$t(`${item.capPSLanguageRes}`, item.caption)"
			></AppIconText>
			<div
				v-if="counterData?.[item.counterId]"
				v-badge="counterData[item.counterId]"
				class="drbar-badge"
			></div>
		</a-menu-item>
	</a-menu>
</template>
<script setup lang="ts">
import { IParam } from '@/core';
import { drbarProps } from './drbar';
const props = defineProps(drbarProps);
const selectedKeys = ref<string[]>([props.codeName]);
const emit = defineEmits<{
	(name: 'itemClick', item: IParam): void;
}>();

const handleSelect = (key: string | number) => {
	const item = props.ctrlItems.find((item: IParam) =>
		Object.is(item.name, key)
	);
	if (item) {
		emit('itemClick', item);
	} else {
		emit('itemClick', { name: key, appViewName: '' });
	}
};
</script>
